<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --coral: hsl(23, 83%, 82%);
            --coral--b: hsl(23, 99%, 75%);
            --pink: hsl(335, 52%, 92%);
            --pink--b: hsl(335, 82%, 86%);
            --yellow: hsl(42, 97%, 85%);
            --yellow--b: hsl(42, 100%, 73%);
            --green: hsl(100, 64%, 86%);
            --green--b: hsl(100, 41%, 76%);
            --blue: hsl(187, 61%, 79%);
            --blue--b: hsl(187, 54%, 68%);
            --purple: hsl(283, 24%, 86%);
            --purple--b: hsl(283, 43%, 80%);
            --light-gray-blue: hsl(182, 29%, 96%);

            --pageMax: 1260px;
            --headerHeight: 60px;
            --middleHeight: 300px;
            --footerHeight: 100px;
        }

        @import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap");

        body {
            margin: 0;
            padding: 0;
            font-family: system-ui, sans-serif;
        }

        h2 {
            margin: 0;
        }

        ul,
        ol {
            margin: 0;
            padding: 0;
        }

        style,
        code {
            font-family: "Inconsolata", monospace;
        }

        .coral {
            background-color: var(--coral);
            border: 1px solid var(--coral--b);
        }

        .pink {
            background-color: var(--pink);
            border: 1px solid var(--pink--b);
        }

        .yellow {
            background-color: var(--yellow);
            border: 1px solid var(--yellow--b);
        }

        .green {
            background-color: var(--green);
            border: 1px solid var(--green--b);
        }

        .blue {
            background-color: var(--blue);
            border: 1px solid var(--blue--b);
        }

        .purple {
            background-color: var(--purple);
            border: 1px solid var(--purple--b)
        }

        .white {
            background-color: white;
        }

        .meta h1 {
            font-size: 4rem;
            font-weight: 300;
        }

        .meta p {
            font-size: 1.2rem;
            line-height: 1.5;
            font-weight: 300;
        }

        .meta a {
            color: hsl(207, 90%, 54%);
        }

        section:nth-child(2n) {
            background-color: var(--light-gray-blue);
        }

        section:nth-child(2n) .code-container,
        section:nth-child(2n) .tab-area button.active {
            background-color: white;
        }

        .section-title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .section-title code {
            display: block;
            width: auto;
            font-size: 0.8em;
            margin-left: 2em;
        }

        .ex-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            grid-gap: 2rem;
        }

        .ex-container {
            resize: both;
            position: relative;
            overflow: hidden;
            height: 100%;
            width: 100%;
            z-index: 2;
            box-shadow: 0 0 20px -10px hsl(187, 97%, 24%);
            display: grid;
            align-items: center;
            background: white;
        }

        /* .ex-container::before {
  content: "resize me!";
  background-color: white;
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: block;
} */

        .meta,
        .footer {
            text-align: center;
            padding: 4rem;
            margin: 0 auto;
        }

        .footer a {
            color: white;
            color: hsl(207, 90%, 54%);
        }

        .code-area {
            display: grid;
            grid-template-rows: auto 1fr auto;
            height: 400px;
        }

        .code-container {
            white-space: pre-wrap;
            display: none;
            overflow-y: scroll;
            background-color: var(--light-gray-blue);
            margin-bottom: 1rem;
            padding: 1rem;
            border: 1px solid var(--blue);
            margin-top: -1px;
            font-size: 1.35rem;
        }

        .tab-area {
            display: grid;
            width: 50%;
            justify-self: end;
            grid-template-columns: 1fr 1fr;
        }

        .tab-area button {
            border: none;
            border-radius: 0.5rem 0.5rem 0 0;
            padding: 0.5rem;
        }

        .tab-area button.active {
            border: 1px solid var(--blue);
            border-bottom: none;
            z-index: 1;
            background: var(--light-gray-blue);
        }

        .section-container {
            max-width: var(--pageMax);
            margin: 0 auto;
            padding: 4rem 2rem;
        }

        .codepen-link {
            text-align: right;
        }

        .parent {
            width: 100%;
            height: 100%;
        }

        .taglist {
            display: flex;
        }

        .taglist li {
            padding: 0.2rem 0.5rem;
            border-radius: 1rem;
            font-size: 14px;
            list-style: none;
        }

        .taglist li+li {
            margin-left: 0.5rem;
        }

        .meta-area {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            align-items: center;
            margin-bottom: 1rem;
        }

        .support-area {
            display: grid;
            justify-content: flex-end;
        }

        .support-area span {
            justify-self: flex-end;
            margin-bottom: 0.25rem;
        }

        .codepen-link {
            color: hsl(187, 83%, 37%);
            font-style: italic;
        }

        /*  For Demos */

        .box {
            font-size: 2rem;
            padding: 1rem;
            display: grid;
            place-items: center;
            border-radius: 1rem;
            border-style: dashed;
        }

        .ex-container .section {
            font-size: 1.5rem;
            padding: 1rem;
            border-style: dashed;
        }

        @media screen and (min-width: 811px) {
            .ex-section {
                height: 400px;
            }

            .section-container {
                padding: 8rem 4rem;
            }

            .meta {
                max-width: 46ch;
                padding: 8rem auto;
            }
        }

        @media screen and (max-width: 811px) {
            .ex-container {
                height: 300px;
            }

            .ex-section {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            }

            .box {
                font-size: 1rem;
            }

            .ex-container .section {
                font-size: 1rem;
            }

            .section-title code {
                margin-left: 0;
                margin-top: 1rem;
            }

            .support-area {
                margin-top: 1rem;
                margin-bottom: 0.5rem;
            }

            .code-area {
                height: 300px;
            }

            .code-container {
                font-size: 1.15rem;
            }
        }

        .yt-embed {
            padding-top: 56.25%;
            position: relative;
            width: 100%;
        }

        .yt-embed iframe {
            height: 100%;
            left: 50%;
            position: absolute;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 100%;
        }

        /* Scrollbar */
        body::-webkit-scrollbar {
            width: 0.75rem;
        }

        body::-webkit-scrollbar-track {
            background-color: transparent;
            border: 1px solid var(--blue--b);
        }

        body::-webkit-scrollbar-thumb {
            background-color: var(--blue);
        }
    </style>
</head>

<body>
    <div class="section-container">
        <div class="meta-area">
            <h2 class="section-title">01. Super Centered
                <code class="blue">place-items: center</code>
            </h2>
            <div class="support-area">
                <span>
                    Current Browser Support:
                </span>
                <ul class="taglist">
                    <li class="green">Edge</li>
                    <li class="green">Firefox</li>
                    <li class="green">Chrome</li>
                    <li class="green">Safari</li>
                </ul>
            </div>
        </div>

        <div class="ex-section ex1">
            <div class="ex-area">
                <div class="ex-container">
                </div>
            </div>
            <div class="code-area">
                <div class="tab-area">
                    <button class="tab html">HTML</button>
                    <button class="tab css">CSS</button>
                </div>
                <style class="code-container css" contenteditable></style>
                <code class="code-container html"></code>
                <a href="https://codepen.io/una/pen/YzyYbBx" class="codepen-link">Explore on CodePen</a>
            </div>
        </div>
    </div>
    </section>
    <!-- 01 end -->

    <!-- 02 start -->
    <section>
        <div class="section-container">
            <div class="meta-area">
                <h2 class="section-title">02. The Deconstructed Pancake
                    <code class="pink">flex: 0 1 &lt;baseWidth&gt;</code>
                </h2>
                <div class="support-area">
                    <span>
                        Current Browser Support:
                    </span>
                    <ul class="taglist">
                        <li class="green">Edge</li>
                        <li class="green">Firefox</li>
                        <li class="green">Chrome</li>
                        <li class="green">Safari</li>
                    </ul>
                </div>
            </div>

            <div class="ex-section ex2">
                <div class="ex-area">
                    <div class="ex-container">
                    </div>
                </div>
                <div class="code-area">
                    <div class="tab-area">
                        <button class="tab html">HTML</button>
                        <button class="tab css">CSS</button>
                    </div>
                    <style class="code-container css" contenteditable></style>
                    <code class="code-container html"></code>

                    <a href="https://codepen.io/una/pen/WNQdBza" class="codepen-link">Explore on CodePen</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 02 end -->

    <!-- 03 start -->
    <section>
        <div class="section-container">
            <div class="meta-area">
                <h2 class="section-title">03. Sidebar Says
                    <code class="purple">grid-template-columns: minmax(&lt;min&gt;, &lt;max&gt;) ...</code>
                </h2>
                <div class="support-area">
                    <span>
                        Current Browser Support:
                    </span>
                    <ul class="taglist">
                        <li class="green">Edge</li>
                        <li class="green">Firefox</li>
                        <li class="green">Chrome</li>
                        <li class="green">Safari</li>
                    </ul>
                </div>
            </div>

            <div class="ex-section ex3">
                <div class="ex-area">
                    <div class="ex-container">
                    </div>
                </div>
                <div class="code-area">
                    <div class="tab-area">
                        <button class="tab html">HTML</button>
                        <button class="tab css">CSS</button>
                    </div>
                    <style class="code-container css" contenteditable></style>
                    <code class="code-container html"></code>

                    <a href="https://codepen.io/una/pen/gOaNeWL" class="codepen-link">Explore on CodePen</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 03 end -->

    <!-- 04 start -->
    <section>
        <div class="section-container">
            <div class="meta-area">
                <h2 class="section-title">04. Pancake Stack
                    <code class="coral">grid-template-rows: auto 1fr auto</code>
                </h2>
                <div class="support-area">
                    <span>
                        Current Browser Support:
                    </span>
                    <ul class="taglist">
                        <li class="green">Edge</li>
                        <li class="green">Firefox</li>
                        <li class="green">Chrome</li>
                        <li class="green">Safari</li>
                    </ul>
                </div>
            </div>

            <div class="ex-section ex4">
                <div class="ex-area">
                    <div class="ex-container">
                    </div>
                </div>
                <div class="code-area">
                    <div class="tab-area">
                        <button class="tab html">HTML</button>
                        <button class="tab css">CSS</button>
                    </div>
                    <style class="code-container css" contenteditable></style>
                    <code class="code-container html"></code>

                    <a href="https://codepen.io/una/pen/bGVXPWB" class="codepen-link">Explore on CodePen</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 04 end -->

    <!-- 05 start -->
    <section>
        <div class="section-container">
            <div class="meta-area">
                <h2 class="section-title">05. Classic Holy Grail Layout
                    <code class="yellow">grid-template: auto 1fr auto / auto 1fr auto</code>
                </h2>
                <div class="support-area">
                    <span>
                        Current Browser Support:
                    </span>
                    <ul class="taglist">
                        <li class="green">Edge</li>
                        <li class="green">Firefox</li>
                        <li class="green">Chrome</li>
                        <li class="green">Safari</li>
                    </ul>
                </div>
            </div>

            <div class="ex-section ex5">
                <div class="ex-area">
                    <div class="ex-container">
                    </div>
                </div>
                <div class="code-area">
                    <div class="tab-area">
                        <button class="tab html">HTML</button>
                        <button class="tab css">CSS</button>
                    </div>
                    <style class="code-container css" contenteditable></style>
                    <code class="code-container html"></code>

                    <a href="https://codepen.io/una/pen/mdVbdBy" class="codepen-link">Explore on CodePen</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 05 end -->

    <!-- 06 start -->
    <section>
        <div class="section-container">
            <div class="meta-area">
                <h2 class="section-title">06. 12-Span Grid
                    <code class="green">grid-template-columns: repeat(12, 1fr)</code>
                </h2>
                <div class="support-area">
                    <span>
                        Current Browser Support:
                    </span>
                    <ul class="taglist">
                        <li class="green">Edge</li>
                        <li class="green">Firefox</li>
                        <li class="green">Chrome</li>
                        <li class="green">Safari</li>
                    </ul>
                </div>
            </div>

            <div class="ex-section ex6">
                <div class="ex-area">
                    <div class="ex-container">
                    </div>
                </div>
                <div class="code-area">
                    <div class="tab-area">
                        <button class="tab html">HTML</button>
                        <button class="tab css">CSS</button>
                    </div>
                    <style class="code-container css" contenteditable></style>
                    <code class="code-container html"></code>

                    <a href="https://codepen.io/una/pen/eYJOYjj" class="codepen-link">Explore on CodePen</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 06 end -->

    <!-- 07 start -->
    <section>
        <div class="section-container">
            <div class="meta-area">
                <h2 class="section-title">07. RAM (Repeat, Auto, Minmax)
                    <code class="blue">grid-template-columns: repeat(auto-fit, minmax(&lt;base&gt;, 1fr))</code>
                </h2>
                <div class="support-area">
                    <span>
                        Current Browser Support:
                    </span>
                    <ul class="taglist">
                        <li class="green">Edge</li>
                        <li class="green">Firefox</li>
                        <li class="green">Chrome</li>
                        <li class="green">Safari</li>
                    </ul>
                </div>
            </div>

            <div class="ex-section ex7">
                <div class="ex-area">
                    <div class="ex-container">
                    </div>
                </div>
                <div class="code-area">
                    <div class="tab-area">
                        <button class="tab html">HTML</button>
                        <button class="tab css">CSS</button>
                    </div>
                    <style class="code-container css" contenteditable></style>
                    <code class="code-container html"></code>

                    <a href="https://codepen.io/una/pen/oNbvNQv" class="codepen-link">Explore on CodePen</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 07 end -->

    <!-- 08 start -->
    <section>
        <div class="section-container">
            <div class="meta-area">
                <h2 class="section-title">08. Line Up
                    <code class="pink">justify-content: space-between</code>
                </h2>
                <div class="support-area">
                    <span>
                        Current Browser Support:
                    </span>
                    <ul class="taglist">
                        <li class="green">Edge</li>
                        <li class="green">Firefox</li>
                        <li class="green">Chrome</li>
                        <li class="green">Safari</li>
                    </ul>
                </div>
            </div>

            <div class="ex-section ex8">
                <div class="ex-area">
                    <div class="ex-container">
                    </div>
                </div>
                <div class="code-area">
                    <div class="tab-area">
                        <button class="tab html">HTML</button>
                        <button class="tab css">CSS</button>
                    </div>
                    <style class="code-container css" contenteditable></style>
                    <code class="code-container html"></code>

                    <a href="https://codepen.io/una/pen/ExPYomq" class="codepen-link">Explore on CodePen</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 08 end -->

    <!-- 09 start -->
    <section>
        <div class="section-container">
            <div class="meta-area">
                <h2 class="section-title">09. Clamping My Style
                    <code class="purple">clamp(&lt;min&gt;, &lt;actual&gt;, &lt;max&gt;)</code>
                </h2>
                <div class="support-area">
                    <span>
                        Current Browser Support:
                    </span>
                    <ul class="taglist">
                        <li class="green">Edge</li>
                        <li class="green">Firefox</li>
                        <li class="green">Chrome</li>
                        <li class="green">Safari</li>
                    </ul>
                </div>
            </div>

            <div class="ex-section ex9">
                <div class="ex-area">
                    <div class="ex-container">
                    </div>
                </div>
                <div class="code-area">
                    <div class="tab-area">
                        <button class="tab html">HTML</button>
                        <button class="tab css">CSS</button>
                    </div>
                    <style class="code-container css" contenteditable></style>
                    <code class="code-container html"></code>

                    <a href="https://codepen.io/una/pen/QWyLxaL" class="codepen-link">Explore on CodePen</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 09 end -->

    <!-- 10 start -->
    <section>
        <div class="section-container">
            <div class="meta-area">
                <h2 class="section-title">10. Respect for Aspect
                    <code class="coral">aspect-ratio: &lt;width&gt; / &lt;height&gt;</code>
                </h2>
                <div class="support-area">
                    <span>
                        Current Browser Support:
                    </span>
                    <ul class="taglist">
                        <li class="green">Edge</li>
                        <li class="green">Firefox</li>
                        <li class="green">Chrome</li>
                        <li class="green">Safari</li>
                    </ul>
                </div>
            </div>

            <div class="ex-section ex10">
                <div class="ex-area">
                    <div class="ex-container">
                    </div>
                </div>
                <div class="code-area">
                    <div class="tab-area">
                        <button class="tab html">HTML</button>
                        <button class="tab css">CSS</button>
                    </div>
                    <style class="code-container css" contenteditable></style>
                    <code class="code-container html"></code>

                    <a href="https://codepen.io/una/pen/xxZKzaX" class="codepen-link">Explore on CodePen</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 010 end -->

    <script>

        const populateCode = exNum => {
            const demoArea = document.querySelector(`.${exNum} .ex-container`);
            const cssArea = document.querySelector(`.${exNum} .code-container.css`);
            const htmlArea = document.querySelector(`.${exNum} .code-container.html`);
            demoArea.innerHTML = eval(exNum).html;
            cssArea.innerHTML = eval(exNum).css;
            document.querySelector(`.${exNum} .tab.css`).classList.add("active");
            htmlArea.innerText = eval(exNum).html;
            cssArea.style.display = "block";
        };

        // Events

        [...document.querySelectorAll(".tab-area button")].forEach(button => {
            button.addEventListener("click", event => {
                let lang = event.target.innerText.toLowerCase();
                const exNum = event.target.parentElement.parentElement.parentElement.classList[1];
                if (lang === "css") {
                    document.querySelector(`.${exNum} .code-container.html`).style.display = "none";
                    document.querySelector(`.${exNum} .tab.html`).classList.remove("active");
                    document.querySelector(`.${exNum} .code-container.css`).style.display = "block";
                    document.querySelector(`.${exNum} .tab.css`).classList.add("active");
                } else {
                    document.querySelector(`.${exNum} .code-container.css`).style.display = "none";
                    document.querySelector(`.${exNum} .tab.css`).classList.remove("active");
                    document.querySelector(`.${exNum} .code-container.html`).style.display = "block";
                    document.querySelector(`.${exNum} .tab.html`).classList.add("active");
                }
            });
        });


        // Ex1: Absolutely Centered

        const ex1 = {
            html: `
<div class="parent blue" >
<div class="box coral" contenteditable>
  :)
</div>
`,
          css: `
.ex1 .parent {
  display: grid;
  place-items: center;
}
`,
            codepen: 'https://codepen.io/una/pen/YzyYbBx'
        };

        const ex2 = {
            html: `
<div class="parent white">
  <div class="box green">1</div>
  <div class="box green">2</div>
  <div class="box green">3</div>
</div>
`,
            css: `
.ex2 .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ex2 .box {
  flex: 1 1 150px; /*  Stretching: */
  flex: 0 1 150px; /*  No stretching: */
  margin: 5px;
}
`,
            codepen: 'https://codepen.io/una/pen/WNQdBza'
        };

        const ex3 = {
            html: `
<div class="parent">
  <div class="section yellow" contenteditable>
  Min: 150px / Max: 25%
  </div>
  <div class="section purple" contenteditable>
    This element takes the second grid position (1fr), meaning
    it takes up the rest of the remaining space.
  </div>
</div>
`,
            css: `
.ex3 .parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}
`,
            codepen: 'https://codepen.io/una/pen/gOaNeWL'
        };

        const ex4 = {
            html: `
<div class="parent">
  <header class="blue section" contenteditable>Header</header>
  <main class="coral section" contenteditable>Main</main>
  <footer class="purple section" contenteditable>Footer Content</footer>
</div>
`,
            css: `
.ex4 .parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
`,
            codepen: 'https://codepen.io/una/pen/bGVXPWB'
        };

        const ex5 = {
            html: `
<div class="parent">
  <header class="pink section">Header</header>
  <div class="left-side blue section" contenteditable>Left Sidebar</div>
  <main class="section coral" contenteditable> Main Content</main>
  <div class="right-side yellow section" contenteditable>Right Sidebar</div>
  <footer class="green section">Footer</footer>
</div>
`,
            css: `
.ex5 .parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}
.ex5 header {
  padding: 2rem;
  grid-column: 1 / 4;
}
.ex5 .left-side {
  grid-column: 1 / 2;
}
.ex5 main {
  grid-column: 2 / 3;
}
.ex5 .right-side {
  grid-column: 3 / 4;
}
.ex5 footer {
  grid-column: 1 / 4;
}
`,
            codepen: 'https://codepen.io/una/pen/bGVXPWB'
        };

        const ex6 = {
            html: `
<div class="parent white">
  <div class="span-12 green section">Span 12</div>
  <div class="span-6 coral section">Span 6</div>
  <div class="span-4 blue section">Span 4</div>
  <div class="span-2 yellow section">Span 2</div>
</div>
`,
            css: `
.ex6 .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.ex6 .span-12 {
  grid-column: 1 / span 12;
}
.ex6 .span-6 {
  grid-column: 1 / span 6;
}
.ex6 .span-4 {
  grid-column: 4 / span 4;
}
.ex6 .span-2 {
  grid-column: 3 / span 2;
}
/* centering text */
.ex6 .section {
  display: grid;
  place-items: center;
  text-align: center
}
`,
            codepen: 'https://codepen.io/una/pen/eYJOYjj'
        };

        const ex7 = {
            html: `
<div class="parent white">
  <div class="box pink">1</div>
  <div class="box purple">2</div>
  <div class="box blue">3</div>
  <div class="box green">4</div>
</div>
`,
            css: `
.ex7 .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
`,
            codepen: 'https://codepen.io/una/pen/oNbvNQv'
        };

        const ex8 = {
            html: `
<div class="parent white">
  <div class="card yellow">
    <h3>Title - Card 1</h3>
    <p contenteditable>Medium length description with a few more words here.</p>
    <div class="visual pink"></div>
  </div>
  <div class="card yellow">
    <h3>Title - Card 2</h3>
    <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    <div class="visual blue"></div>
  </div>
  <div class="card yellow">
    <h3>Title - Card 3</h3>
    <p contenteditable>Short Description.</p>
    <div class="visual green"></div>
  </div>
</div>
`,
            css: `
.ex8 .parent {
  height: auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.ex8 .visual {
  height: 100px;
  width: 100%;
}
.ex8 .card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: space-between;
}
.ex8 h3 {
  margin: 0
}
`,
            codepen: 'https://codepen.io/una/pen/ExPYomq'
        };

        const ex9 = {
            html: `
<div class="parent white">
  <div class="card purple">
    <h1>Title Here</h1>
    <div class="visual yellow"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>
`,
            css: `
.ex9 .parent {
  display: grid;
  place-items: center;
}
.ex9 .card {
  width: clamp(23ch, 50%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.ex9 .visual {
    height: 125px;
    width: 100%;
}
`,
            codepen: 'https://codepen.io/una/pen/QWyLxaL'
        };

        const ex10 = {
            html: `
<div class="parent white">
  <div class="card blue">
    <h1>Video Title</h1>
    <div class="visual green"></div>
    <p>Descriptive text for aspect ratio card demo.</p>
  </div>
</div>
`,
            css: `
.ex10 .parent {
  display: grid;
  place-items: center;
}
.ex10 .visual {
  aspect-ratio: 16 / 9;
}
.ex10 .card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
`,
            codepen: 'https://codepen.io/una/pen/xxZKzaX'
        };

        populateCode("ex1");
        populateCode("ex2");
        populateCode("ex3");
        populateCode("ex4");
        populateCode("ex5");
        populateCode("ex6");
        populateCode("ex7");
        populateCode("ex8");
        populateCode("ex9");
        populateCode("ex10");
    </script>
</body>

</html>